.divider {

  
  &-horizontal {
    display: flex;
    align-items: center;
    &::after,
    &::before {
      content: '';
      flex: 1;
      height: 2px;
      background: $font-color-light-gray;
    }
    &.divider-left {
      &::after {
        flex: 10;
      }
    }
    &.divider-right {
      &::before {
        flex: 10;
      }
    }
  }
  &-vertical{
    display: inline-block;
    vertical-align: middle;
    margin: 0 $gutter / 2;
    height: 0.8em;
    width: 2px;
  }
  &-title {
    padding: 0 $gutter;
  }
  &-primary {
    &::after,
    &::before {
      background: $blue;
    }
    &.divider-vertical{
      background-color: $blue;
    }
    .divider-title {
      color: $blue;
    }
  }
}